.material-dropdown-menu {
  width: 325px;
  padding: 6px 0;

  .material {
    &-group-title {
      display: flex;
      padding: 6px 14px 8px;
      color: rgb(55 53 47 / 65%);
      fill: rgb(55 53 47 / 45%);
      font-size: 12px;
      font-weight: bold;
      user-select: none;
    }

    &-item {
      display: flex;
      height: 55px;
      align-items: center;
      transition: background 20ms ease-in 0s;
      cursor: pointer;
      border-radius: 4px;
      margin: 0 4px;

      &:hover,
      &.active {
        background-color: rgb(55 53 47 / 6%);
      }
    }

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      margin-right: 4px;
      border: 1px solid rgb(15 15 15 / 10%);
      border-radius: 4px;
      width: 46px;
      height: 46px;
      color: #5e6772 !important;
      font-size: 20px;
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0 12px 0 6px;

      .smap-ellipsis.content {
        color: #37352f;
        font-size: 14px;
      }

      .smap-ellipsis.desc {
        color: #787774;
        font-size: 12px;
        margin-top: 2px;
      }
    }
  }
}
